<template>
  <div class="app-page">
    <div class="language" style="margin-bottom: 15px;width: 600px;">
      <el-input v-model="language" placeholder="请输入语言" />
    </div>
    <div id="editor"></div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      editor: null,
      language: 'javascript'
    }
  },
  methods: {
    initEditor() {
      // 初始化editor
      const ace = window.ace
      this.editor = ace.edit('editor')
      // 设置主题
      this.editor.setTheme('ace/theme/monokai')
      // 设置语言类型
      this.editor.session.setMode('ace/mode/javascript')
      // 设置字体大小
      this.editor.setFontSize(16)
      // 设置只读（true时只读，用于展示代码）
      this.editor.setReadOnly(false)
      // 自动换行,设置为off关闭
      this.editor.setOption('wrap', 'free')
      // 启用提示菜单：代码补全，前提是需要引入ext-language_tools.js文件
      ace.require('ace/ext/language_tools')
      // 自定义代码补全
      // const data = [{meta: "abcdefg", caption: "sonic", value: "sonic", score:1}]
      // const langTools = ace.require('ace/ext/language_tools')
      // langTools.addCompleter({
      //   getCompletions: function(editor, session, pos, prefix, callback) {
      //     if (prefix.length === 0) {
      //       return callback(null, [])
      //     } else {
      //       return callback(null, data)
      //     }
      //   }
      // })
      // 设置选项
      this.editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        showPrintMargin: false
      })
      // 自定义快捷键
      this.editor.commands.addCommand({
        name: 'myCommand',
        bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
        exec: (editor) => {
          console.log(editor)
          this.$nextTick(() => {
            this.addBreakPoint()
          })
        },
        readOnly: true
      })
      // 设置缩进或者tabSize
      this.editor.getSession().setTabSize(2)
      // 设置editor的默认值
      this.editor.setValue(`function foo(items) {\n\tvar x = "All this is syntax highlighted";\n\treturn x;\n}`, -1) /// 带上-1就不会默认选中，否则会默认选中
      // 打断点功能实现
      // this.$nextTick(() => {
      //   this.addBreakPoint()
      // })
    },
    addBreakPoint () {
      // 有问题：当滚动条滚动时会把之后的给清空了
      this.$nextTick(() => {
        $('.ace_gutter-cell').each((index, item) => {
          $(item).click(() => {
            const top = 6
            $(item).append(`<span class="break-point" style="top: ${top}px"></span>`)
          })
        })
      })
    }
  },
  mounted () {
    this.initEditor()
  },
  watch: {
    language: {
      handler (val, old) {
        this.editor.session.setMode(`ace/mode/${val}`)
      }
    }
  }
}
</script>

<style lang="scss">
.app-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  #editor {
    width: 600px;
    height: 400px;
  }
  .ace_gutter-cell {
    cursor: pointer !important;
  }
  .break-point {
    position: absolute;
    left: 8px;
    list-style: none;
    z-index: 100;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
  }
}
</style>